import React from 'react';
import { Icon, Flex, Checkbox, List, TimeRangePicker, Modal, Tools } from 'weaver-mobile';
import classnames from 'classnames';
const { FormItem } = List;
const getLabel = Tools.getLabel;
class EditTable extends React.Component {
  static defaultProps = {
    prefixCls: 'mt-list-editable'
  };
  constructor(props) {
    super(props);
    this.state = {
      showAdd: true,
      showCopy: true,
      showDelete: true,
      disabled: true,
      checkProps: {},
      data: props.data || [],
      value: [],
    };
  }

  addClick = () => {
    const { data } = this.state;
    let arr = data;
    if (!Array.isArray(data)) return;
    let nextId = data.length === 0 ? 0 : data[data.length - 1].id + 1;
    arr.push({
      id: nextId,
      date: []
    });

    this.setState({ data: arr }, () => {
      const { data } = this.state;
      typeof this.props.onChange === 'function' && this.props.onChange(data);
    });
  }


  delClick = () => {

    Modal.alert(getLabel(15097,'确定要删除吗？'), '', [
      { text: getLabel(31129,'取消'), onPress: () => {}
      },
      {
        text: getLabel(826,'确定'),
        onPress: () => {
          const { data, checkProps, } = this.state;
          let tempData = [];
          Array.isArray(data) && data.forEach(res => {
            if (checkProps[res.id] !== true) {
              tempData.push(res);
            }
          });
          this.setState({ data: tempData, checkProps: {}, disabled: true }, () => {
            const { data } = this.state;
            typeof this.props.onChange === 'function' && this.props.onChange(data);
          });
        },
      },
    ]);

  }

  copyClick = () => {
    const { data, checkProps } = this.state;
    let copyData = [...data];
    let nextId = data[data.length - 1].id + 1;
    let hasCopy = false;
    Array.isArray(data) && data.forEach(res => {
      if (checkProps[res.id] === true) {
        hasCopy = true;
        copyData.push({
          ...res,
          id: nextId
        });
        // let copyV = copyValue.find(v => v.id === res.id);
        // if(copyV) {
        //   copyValue.push({
        //     ...copyV,
        //     id: nextId
        //   });
        // }
        nextId++;
      }
    });

    if (hasCopy) {
      this.setState({ data: copyData, checkProps: {}, disabled: true }, () => {
        const { data } = this.state;
        typeof this.props.onChange === 'function' && this.props.onChange(data);
      });
    }
  }

  getTitleContent = () => {
    const { prefixCls, } = this.props;
    const { showAdd, showCopy, showDelete, disabled } = this.state;
    let content = [];
    const iconCls = classnames(
      `${prefixCls}-operation-icon`,
      disabled ? 'disabled' : '',
      'icon-left-spacing'
    );
    if (showAdd) {
      content.push(
        <Icon
          key="add"
          type="tianjia"
          className={`${prefixCls}-operation-icon`}
          onClick={() => this.addClick()}
        />,
      );
    }
    if (showCopy) {
      content.push(
        <Icon
          key="copy"
          className={iconCls}
          type="replication-1"
          onClick={() => !disabled && this.copyClick()}
        />,
      );
    }
    if (showDelete) {
      content.push(
        <Icon
          key="delete"
          className={iconCls}
          type="shanchu"
          onClick={() => !disabled && this.delClick()}
        />,
      );
    }

    return (
      <div className={`${prefixCls}-title-container`}>
        {content}
      </div>
    );
  }

  changeCheckProps = (id, v) => {
    const { checkProps } = this.state;
    if (id !== undefined) {
      let obj = {
        ...checkProps,
        [id]: v.target.checked
      };
      let disabled = true;
      for (let check in obj) {
        if (obj[check] === true) {
          disabled = false;
          break;
        }
      }
      this.setState({ checkProps: obj, disabled: disabled });
    }
  }

  getItemChecked = (id) => {
    let bool = false;
    if (id !== undefined) {
      const { checkProps } = this.state;
      bool = checkProps[id];
    }
    return bool;
  }

  changeDatePicer = (id, date) => {
    if (id !== undefined) {
      const { data } = this.state;
      let changeValue = data;
      if (Array.isArray(data)) {
        let bool = data.some(v => v.id === id);
        if (bool) {
          let arr = [];
          data.forEach(res => {
            if (res.id === id) {
              res = {
                ...res,
                date
              };
            }
            arr.push(res);
          });

          changeValue = arr;
        } else {
          changeValue.push({
            id,
            date
          });
        }
      }
      this.setState({ data: changeValue }, () => {
        const { data } = this.state;
        typeof this.props.onChange === 'function' && this.props.onChange(data);
      });
    }
  }

  getTimeItem = (id, value) => {
    let date = [];
    if(Array.isArray(value)) {
      let timeObj = value.find(v => v.id === id);
      date = timeObj ? timeObj.date : [];
    }
    return date;
  }

  getTimeListContent() {
    const { prefixCls, } = this.props;
    const { showAdd, showCopy, showDelete, disabled, data } = this.state;
    let content = [];
    const flexNone = 'time-list';
    Array.isArray(data) && data.forEach((ele) => {
      ele.id !== undefined && content.push(
        <div className={`${flexNone}-flex`} key={ele.id}>
          <Flex className={`${flexNone}-flex-item`}>
            <Flex.Item className={`${flexNone}-flex-check`}>
              <Checkbox checked={this.getItemChecked(ele.id)} onChange={(v) => this.changeCheckProps(ele.id, v)} />
            </Flex.Item>
            <Flex.Item className={`${flexNone}-flex-timer`}>
              <List>
                <FormItem
                  key={151}
                  label={getLabel('518186','开始结束时间')}
                  line
                  content={<TimeRangePicker
                    placeholder={getLabel('18214','请选择')}
                    // mode="date"
                    required
                    value={this.getTimeItem(ele.id, data)}
                    onChange={v => this.changeDatePicer(ele.id, v)}
                  />}
                />
              </List>
            </Flex.Item>
          </Flex>
        </div>
      );
    })

    return <div className={`${prefixCls}-time-content`}>
      {content}
    </div>
  }

  render() {
    const { style, className, prefixCls } = this.props;
    const wrapCls = `${prefixCls} ${className}`;
    const { data, checkProps, value } = this.state;
    return (
      <div
        className={wrapCls}
        style={style}
      >
        {this.getTitleContent()}
        {this.getTimeListContent()}
      </div>
    );
  }
}



export default EditTable;